<template>
	<div class="factory-info">
		<head-title title="合作--工厂介绍"></head-title>
		<el-card>
			<el-form :model="infoForm" :rules="infoFormRules" ref="infoForm" label-width="120px">
				<div class="content-info">
					<el-form-item label="品牌名称:" prop="factory_name">
						<el-input v-model="infoForm.factory_name" placeholder="请输入品牌名称" clearable></el-input>
					</el-form-item>
					<el-form-item label="企业名称:" prop="name">
						<el-input v-model="infoForm.name" placeholder="请输入企业名称" clearable></el-input>
					</el-form-item>
					<el-form-item label="风格编号:" prop="factory_style_sn">
						<el-input v-model="infoForm.factory_style_sn" placeholder="请输入风格" clearable></el-input>
					</el-form-item>
					<el-form-item label="风格名称:" prop="style">
						<el-input v-model="infoForm.style" placeholder="请输入风格" clearable></el-input>
					</el-form-item>
					<el-form-item label="联系人:" prop="contacts_name">
						<el-input v-model="infoForm.contacts_name" placeholder="请输入联系人" clearable></el-input>
					</el-form-item>
					<el-form-item label="联系电话:" prop="phone">
						<el-input v-model="infoForm.phone" placeholder="请输入联系电话" clearable></el-input>
					</el-form-item>
					<el-form-item label="客服:" prop="">
						<el-input v-model="infoForm.service_id" placeholder="请输入客服id(多客服用英文逗号隔开)" clearable></el-input>
					</el-form-item>
					<el-form-item label="详细地址:" prop="address">
						<el-input v-model="infoForm.address" placeholder="请输入详细地址" clearable></el-input>
					</el-form-item>
					<el-form-item label="公司介绍:" prop="brief">
						<el-input v-model="infoForm.brief" placeholder="请输入公司介绍" type="textarea" :autosize="{ minRows: 2, maxRows: 5}"></el-input>
					</el-form-item>
					<el-form-item label="企业logo:" class="upload-box" prop="logo">
						<div class="factory-img-upload">
							<div class="factory-img-upload-btns">
								<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request="function(res) {return upload(res, 1);}">
									<el-button type="primary" size="small">企业logo</el-button>
								</el-upload>
								<div class="el-upload__tip">小于500KB</div>
							</div>
							<div class="factory-img-upload-imgs">
								<el-image :src="infoForm.logo">
									<div slot="error"></div>
								</el-image>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="背景图片:" class="upload-box" prop="backgroud_img">
						<div class="factory-img-upload">
							<div class="factory-img-upload-btns">
								<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request="function(res) {return upload(res, 2);}">
									<el-button type="primary" size="small">背景图片</el-button>
								</el-upload>
								<div class="el-upload__tip">小于500KB</div>
							</div>
							<div class="factory-img-upload-imgs">
								<el-image :src="infoForm.backgroud_img">
									<div slot="error"></div>
								</el-image>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="分类图片:" class="upload-box" prop="category_img">
						<div class="factory-img-upload">
							<div class="factory-img-upload-btns">
								<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request="function(res) {return upload(res, 3);}">
									<el-button type="primary" size="small">分类图片</el-button>
								</el-upload>
								<div class="el-upload__tip">小于500KB</div>
							</div>
							<div class="factory-img-upload-imgs">
								<el-image :src="infoForm.category_img">
									<div slot="error"></div>
								</el-image>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="企业图片:" class="upload-box" prop="factory_img">
						<div class="factory-img-upload">
							<div class="factory-img-upload-btns">
								<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 4); } ">
									<el-button type="primary" size="small">企业图片</el-button>
								</el-upload>
								<div class="el-upload__tip">小于500KB</div>
							</div>
							<div class="factory-img-upload-imgs">
								<el-image :src="infoForm.factory_img">
									<div slot="error"></div>
								</el-image>
							</div>
						</div>
					</el-form-item>
					<el-button type="primary" style="margin-left: 38px;" @click="submitForm('infoForm')">保存</el-button>
				</div>
			</el-form>
		</el-card>
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				cityJson: '',
				cityList: '',
				areaList: '',
				factory_id: localStorage.getItem('factory_id'),
				factoryInfo: '',
				infoForm: {
					name: '',
					factory_name: '',
					contacts_name: '',
					phone: '',
					address: '',
					brief: '',
					style:'',
					service_id: '',
					logo: '',
					backgroud_img: '',
					factory_img: '',
					factory_style_sn: '',
					category_img: '',
					is_factory: 1
				},
				// 校对规则
				infoFormRules: {
					name: [{
						required: true,
						message: '请输入企业名称'
					}],
					factory_name: [{
						required: true,
						message: '请输入品牌名称'
					}],
					factory_style_sn: [{
						required: true,
						message: '请输入风格'
					}],
					phone: [{
						required: true,
						message: '请输入联系方式'
					}],
					address: [{
						required: true,
						message: '请输入详细地址'
					}],
				}
			};
		},
		methods: {
			// 初始化列表
			init() {
				let id = this.$route.query.id

				let data = {
					factory_id: this.factory_id,
				};

				if (id != undefined) {
					data.factory_id = id
					delete this.infoForm.is_factory
				}
				if(this.factory_id != 'null'){
					this.$http(this.$ApiList.FactoryInfo, data).then(res => {
						this.infoForm = res.datas
					});
				}
				
				
			},
			// 图片上传
			upload(params, type) {
				const file = params.file,
					isJPGPNG = file.type === 'image/jpeg' || 'image/png',
					isLt500KB = file.size / 1024 <= 500;
				if (!isJPGPNG) {
					this.$message.error("只能上传图片格式png、jpg!");
					return;
				}
				if (!isLt500KB) {
					this.$message.error("图片不能大于500K!");
					return;
				}
				const form = new FormData();
				form.append("file[]", file);

				switch (Number(type)) {
					case 1:
						this.$http(this.$ApiList.publicUpload, form).then(res => {
							this.infoForm.logo = res.datas[0];
						})
						break;
					case 2:
						this.$http(this.$ApiList.publicUpload, form).then(res => {
							this.infoForm.backgroud_img = res.datas[0];
						})
						break;
					case 3:
						this.$http(this.$ApiList.publicUpload, form).then(res => {
							this.infoForm.category_img = res.datas[0];
						})
						break;
					case 4:
						this.$http(this.$ApiList.publicUpload, form).then(res => {
							this.infoForm.factory_img = res.datas[0];
						});
						break;

				}
			},
			//提交
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let id = this.$route.query.id
						if (id == undefined) {
							this.infoForm.is_factory = 1
						}
						this.$http(this.$ApiList.UpFactoryInfo, this.infoForm).then(res => {
							this.$layer.msg(res.datas)
							if (this.$route.query.id != undefined) {
								this.$router.push({
									path: '/factory_list'
								});
							}
						})
					} else {
						this.$layer.msg('请填写完整信息后提交')
					}
				});
			}
		},
		created() {
			this.init();
		}
	};
</script>

<style>
	.content-info {
		width: 700px;
	}

	.factory-info .upload-box .factory-img-upload {
		display: flex;
	}

	.factory-info .upload-box .factory-img-upload .factory-img-upload-imgs .el-image {
		width: 140px;
		height: 140px;
		border: solid 1px #e5e5e5;
		margin-left: 25px;
		vertical-align: top;
	}
</style>
